<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>根据标签名获取元素</title>
</head>

<body>
    <ul>
        <li>开森！！！开森！！1</li>
        <!-- <li>开森！！！开森！！2</li>
        <li>开森！！！开森！！3</li>
        <li>开森！！！开森！！4</li>
        <li>开森！！！开森！！5</li> -->
    </ul>
    <ol id="olol">
        <li>小可爱下可爱</li>
        <li>小可爱下可爱</li>
        <li>小可爱下可爱</li>
        <li>小可爱下可爱</li>
        <li>小可爱下可爱</li>
    </ol>
    <script>
        // 1.返回的是 获取元素对象的集合 以伪数组的形式储存的
        var items = document.getElementsByTagName('li');
        console.log(items);
        console.log(items[2]);

        // 2.如果想要依次打印里面的元素对象可以使用遍历的方式
        for (var i = 0; i < items.length; i++) {
            console.log(items[i]);
        }

        // 3.如果只有一个li元素，返回的还是伪数组的形式
        // 4.如果页面中没有这个元素，返回的是空的伪数组形式



        // 5.还可以根据标签名获取某个元素（父元素）内部所有指定标签名的子元素,获取的时候不包括父元素自己
        // element.getElementByTagName('标签名');
        // var ol = document.getElementsByTagName('ol');
        // console.log(ol[0].getElementsByTagName('li'));

        // * 注意：父元素必须是单个对象(必须指明是哪一个元素对象)，获取的时候不包括父元素自己

        var ol = document.getElementById('olol');
        console.log(ol.getElementsByTagName('li'));
    </script>
</body>

</html>